<!-- H265 播放器 -->

<template>
  <div ref="player" :id="id" :class="className" />
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import H5Player from '../H5Player'
import CONST from './CONST'

// ============================== 导出组件 ============================== //

export default CORE.extend(H5Player, {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'H265Player',

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    ...H5Player.computed,

    /**
     * 开始参数
     */
    startParam() {
      return {
        player: this.id,
        token: CONST.token,
        extInfo: {
          probeSize: 8192,
          ignoreAudio: 0,
          coreProbePart: 0.1,
          autoPlay: true,
          cacheLength: 50,
          rawFps: 24,
        },
      }
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    ...H5Player.methods,

    /**
     * 加载
     */
    async load() {
      await CORE.loadJS(CORE.common('js/h265webjs/missile.js'), 'H265 播放器')
      await CORE.loadJS(CORE.common('js/h265webjs/h265webjs-v20221106.js'), 'H265 播放器')

      window.STATICE_MEM_playerCount = -1
      window.STATICE_MEM_playerIndexPtr = 0

      this.loaded = true
    },

    /**
     * 开始
     */
    start() {
      this.player = window.new265webjs(this.value, this.startParam)
      this.player.onReadyShowDone = this.resize
      this.player.do()
    },

    /**
     * 停止
     */
    stop() {
      if (this.player) {
        this.player.release()
        this.player = null
      }
    },

    /**
     * 重设尺寸
     */
    resize() {
      const { clientWidth, clientHeight } = this.$refs.player
      this.player && this.player.resize(clientWidth, clientHeight)
    },
  },
})
</script>
